<template>
  <div class="rule-list">
    <leave-crud title="数据规则" :url="url" :searchOption="searchOption">
      <template slot="tableRows">
        <el-table-column prop="name" label="规则名称"></el-table-column>
        <el-table-column prop="user.name" label="创建用户"></el-table-column>
        <el-table-column prop="action.name" label="关联动作"></el-table-column>
        <el-table-column prop="count" label="触发次数"></el-table-column>
        <el-table-column prop="server" label="包含服务器">
          <template slot-scope="props">
            <el-tag
              v-if="props.row.server.length > 0" size="mini" type="info"
              v-for="(item, index) in props.row.server"
              :key="index">
              {{ item ? item.name : '暂无' }}
            </el-tag>
            <span v-else>
              暂无
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="rule" label="规则信息">
          <template slot-scope="props">
            <el-popover
              placement="top-start"
              width="500"
              title="规则信息"
              trigger="hover">
              <div v-html="$jsonFormat(props.row.rule)"></div>
              <el-tag size="mini" type="primary" slot="reference">查看</el-tag>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" min-width="110px">
          <template slot-scope="props">
            {{ props.row.createdAt | date }}
          </template>
        </el-table-column>
      </template>
    </leave-crud>
  </div>
</template>


<script>
  export default {
    name: 'rule-list',
    data() {
      return {
        url: '/rule',
        searchOption: [
          {
            'key': 'name',
            'label': '规则名称',
          },
          {
            'key': 'user.name',
            'label': '创建用户',
          },
        ],
      }
    },
    methods: {},
    created() {},
  }
</script>


<style lang="scss">
  .rule-list {
  }
</style>
